<template>
    <div>
        <!-- 搜索版块 -->
        <Nav :dialogTitle="dialogTitle" @dialogEmit="dialogEmit" :dialogEdit="dialogEdit" />
        <div class="list_box">
            <div class="list_table">
                <el-table
                    ref="multipleTableRef"
                    :data="
                        tableData.slice(
                            (pages.currentPage - 1) * pages.pagesize,
                            pages.currentPage * pages.pagesize
                        )
                    "
                    style="width: 100%"
                >
                    <el-table-column align="center" type="selection" width="55" />
                    <el-table-column align="center" property="name" label="分类名称" width="120" />
                    <el-table-column align="center" property="owningSite" label="所属站点" />
                    <el-table-column align="center" property="sort" label="排序" />
                    <el-table-column align="center" property="state" label="分类状态" width="130">
                        <template #default="scope">
                            <el-switch
                                v-model="scope.row.state"
                                @change="beforeChange(scope.row.state)"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="创建时间">
                        <template #default="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column align="center" label="更新时间">
                        <template #default="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column align="center" label="文章分类">
                        <template #default="scope">
                            <el-button
                                @click="delectArticle('edit', scope.row)"
                                class="table-button"
                                v-if="!scope.row.state"
                                >编辑</el-button
                            >
                            <el-button
                                @click="delectArticle('del', scope.row.id)"
                                v-if="!scope.row.state"
                                >删除</el-button
                            >
                            <el-button
                                @click="delectArticle('set', scope.row.id)"
                                class="table-button"
                                v-else
                                >设置</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <Pagination
                :pages="pages"
                :tableData="tableData"
                @presentPages="presentPages"
            ></Pagination>
        </div>
        <!-- 内容版块 -->
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import Nav from "@/views/components/article/Nav.vue";
import Pagination from "@/views/components/common/Pagination.vue";
const disabled = ref(false);
const pages = reactive({
    currentPage: 1,
    pagesize: 10,
});
const small = ref(false);
const background = ref(true);
const dialogTitle = ref({
    title: "",
    visible: false,
});
const dialogEdit = ref({
    name: "",
    owningSite: "",
    sort: "",
});
const handleSizeChange = (size: number) => {
    pages.pagesize = size;
};
const handleCurrentChange = (currentPage: number) => {
    pages.currentPage = currentPage;
};
const dialogEmit = (emit: any) => {
    dialogTitle.value.visible = emit.visible;
    dialogTitle.value.title = emit.title;
};
const beforeChange = (state: boolean) => {
    if (state) {
        ElMessage({
            message: "操作成功",
            type: "success",
        });
    } else {
        ElMessage({
            message: "分类状态暂时无法关闭，该分类存在已添加的文章，请将文章转移至其他分类后重试！",
            type: "warning",
        });
    }
};
const tableData: any = ref([
    {
        date: "2016-05-03",
        name: "公司新闻",
        owningSite: "法律",
        sort: 0,
        state: true,
        id: 1,
    },
    {
        date: "2016-05-03",
        name: "行业新闻",
        owningSite: "工商",
        sort: 0,
        state: true,
        id: 1,
    },
    {
        date: "2016-05-03",
        name: "招聘信息",
        owningSite: "互联网",
        sort: 0,
        state: false,
        id: 1,
    },
]);
const delectArticle = (d: string, id: any) => {
    const condition: any = new Map([
        [
            "edit",
            () => {
                dialogEdit.value.name = id.name;
                dialogEdit.value.sort = id.sort;
                dialogEdit.value.owningSite = id.owningSite;
                dialogTitle.value.title = "编辑分类";
                dialogTitle.value.visible = true;
            },
        ],
        [
            "del",
            () => {
                ElMessageBox.confirm("是否确认删除该分类", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    draggable: true,
                })
                    .then(() => {
                        tableData.value.forEach((item: any, index: number) => {
                            if (id === item.id) {
                                tableData.value.splice(index, 1);
                            }
                        });
                        ElMessage({
                            type: "success",
                            message: "删除成功",
                        });
                    })
                    .catch(() => {
                        ElMessage({
                            type: "info",
                            message: "取消删除",
                        });
                    });
            },
        ],
        [
            "set",
            () => {
                dialogTitle.value.title = "设置推荐值";
                dialogTitle.value.visible = true;
            },
        ],
    ]);
    condition.get(d)();
};
const presentPages = (data: any) => {
    pages.currentPage = data.currentPage;
    pages.pagesize = data.pagesize;
};
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";

svg {
    width: 14px;
    height: 14px;
    fill: #fff;
    margin-right: 4px;
}

.inner_icon {
    fill: #4d70ff;
    margin-right: 2px;
}

.inner_icon:hover {
    fill: #2d56fa;
}
</style>
